<template>
  <div class="pt">
    <div class="title">商家平台</div>
    <!-- 平台九宫格 -->
    <div class="concent">
      <van-grid :column-num="3" class="grid">
        <van-grid-item
          v-for="(item, i) in platformList"
          :key="item.id"
          @click="$router.push('/Settlement')"
        >
          <img :src="item.png" alt="" />
          <div class="PTtext">
            <span class="p">{{ item.name }}</span>
            <span class="s">{{ item.orders }}</span>
          </div>

          <div class="delicon" @click.stop="del(item, i)">
            <van-icon name="cross" color="red" />
          </div>
        </van-grid-item>
      </van-grid>
      <!-- 添加格子 -->
      <div class="box" @click="tian">
        <img class="jia" src="../.././assets/加号1.png" alt="" />
      </div>
    </div>
    <van-popup v-model="show" :style="{ width: '350px' }">
      <div class="tianjia1">
        <van-grid :column-num="3" class="grid">
          <van-grid-item v-for="item in filtrate" :key="item.id">
            <img :src="item.png" alt="" />
            <div class="PTtext">
              <span class="p">{{ item.name }}</span>
              <span class="s">{{ item.orders }}</span>
            </div>

            <div class="delicon" @click.stop="addpp(item)">
              <van-icon name="plus" color="red" />
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { gitAllP } from "@/api/platform";
import { gitcopy, addp } from "@/api/platform";
import { delp } from "@/api/platform";
export default {
  data() {
    return {
      platformList: [],
      platformcopy: [],
      fangdou: false,

      show: false,
    };
  },
  created() {
    this.getAllP();
    this.getcopy();
    // this.filtrate;
  },
  methods: {
    async getAllP() {
      const list = await gitAllP();
      this.platformList = list.data;
    },

    async getcopy() {
      const list = await gitcopy();
      this.platformcopy = list.data;
      // console.log(this.platformcopy);
    },

    async del(item, i) {
      if (this.fangdou) return;
      this.fangdou = true;
      // console.log(1111);

      await delp(item.id);
      this.platformList.splice(i, 1);
      await this.$toast("删除成功");
      this.fangdou = false;
    },
    tian() {
      if (this.filtrate.length === 0) {
        return this.$toast("已经没有平台添加了");
      }
      this.show = true;
    },
    async addpp(data) {
      const res = await addp(data);
      if (res.status !== 201) {
        this.$toast("添加失败！！");
        return;
      }

      this.platformList.push(data);

      if (this.filtrate.length === 0) {
        this.show = false;
      }
    },
  },
  computed: {
    filtrate() {
      const arr = [];
      this.platformcopy.forEach((item) => {
        const falg = this.platformList.some((val) => {
          return item.id === val.id;
        });
        if (!falg) {
          arr.push(item);
        }
      });

      return arr;
    },
  },
};
</script>

<style lang="less" scoped>
.pt {
  height: 1300px;
  background-color: #f0f0f0;

  .concent {
    height: 100%;
    background-color: #f0f0f0;

    .box {
      margin: 0px 35px 0 35px;
      width: 198px;
      height: 190px;
      color: #3f911e;
      border: 0.5px solid #d4d4d8;
      border-radius: 15px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      .jia {
        width: 120px;
        height: 120px;
        line-height: 190px;
      }
    }
    .tianjia1 {
      width: 350px;
    }
  }
  /deep/.van-popup {
    width: 330px;
  }
  /deep/.van-popup--center {
    width: 330px;
  }

  .title {
    font-size: 50px;
    text-align: center;
    line-height: 100px;
    height: 100px;
  }
  .grid {
    padding: 30px 20px;
    /deep/.van-grid-item__content {
      padding: 0 !important;
      position: relative;
      background-color: #f0f0f0;
      // 文本样式
      .PTtext {
        position: absolute;
        left: 30px;
        top: 110px;
        display: flex;
        flex-direction: column;
        color: #fff;

        .p {
          font-size: 38px;
        }
        .s {
          font-size: 20px;
        }
      }
      // // 图标样式
      // .icon {
      //   position: absolute;
      //   right: 30px;
      //   bottom: 40px;
      //   width: 30px;
      //   height: 30px;
      //   line-height: 30px;
      //   font-size: 20px;
      //   font-weight: 800;
      //   background-color: #fff;
      //   border-radius: 50%;

      //   i {
      //     margin-left: 5px;
      //   }
      // }

      .delicon {
        position: absolute;
        right: 30px;
        bottom: 40px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        font-weight: 800;
        background-color: #fff;
        border-radius: 50%;
        i {
          margin-left: 5px;
        }
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
